<template>
  <div class="bill-white">
    <h1>白坯单据</h1>
<!--     <cc-form v-bind="mainFields" v-model="mainData">
      <template #header>
        <h1>用户编辑模态窗</h1>
      </template>
      <template #footer>
        <h1>表单脚</h1>
      </template>
    </cc-form> -->
    <el-dialog title="新建用户" v-model="centerDialogVisible" width="30%" center>
      <cc-form v-bind="mainFields" v-model="formData">
        <template #header>
          <h1>用户编辑模态窗</h1>
        </template>

        <template #footer>
          <span class="dialog-footer">
            <el-button @click="centerDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="centerDialogVisible = false">确定</el-button>
          </span>
        </template>
      </cc-form>
    </el-dialog>


    <el-button @click="printData">打印表单数据</el-button>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import { CcForm } from "@/base-ui/form";
import { mainFields } from "./config";
import { ElButton, ElDialog } from "element-plus";

export default defineComponent({
  components: { CcForm, ElButton, ElDialog },
  setup(props, { emit }) {
    const rawData = {
      id: 1,
      name: "chanchaw",
      realname: "chanchaw",
      cellphone: "123",
      enable: 1,
      createTime: [new Date(), new Date()],
    };

    const mainData = ref(rawData);
    const printData = () => {
      console.log(mainData.value);
      // console.log("日志出来了么");
    };

    const centerDialogVisible = ref(true);
    const formData = ref({})

    return { mainFields, mainData, printData, centerDialogVisible, formData };
  },
});
</script>
<style scoped></style>